<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AI推荐系统分析仪表板 - 外卖平台</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        
        body {
            font-family: 'Microsoft YaHei', Arial, sans-serif;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            min-height: 100vh;
            color: #333;
        }
        
        .container {
            max-width: 1600px;
            margin: 0 auto;
            padding: 20px;
        }
        
        .header {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            border-radius: 20px;
            padding: 30px;
            margin-bottom: 30px;
            box-shadow: 0 25px 50px rgba(0,0,0,0.15);
            text-align: center;
        }
        
        .header h1 {
            font-size: 3rem;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            margin-bottom: 10px;
        }
        
        .dashboard-grid {
            display: grid;
            grid-template-columns: 2fr 1fr;
            gap: 30px;
            margin-bottom: 30px;
        }
        
        .main-panel {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            border-radius: 20px;
            padding: 30px;
            box-shadow: 0 25px 50px rgba(0,0,0,0.15);
        }
        
        .side-panel {
            display: flex;
            flex-direction: column;
            gap: 20px;
        }
        
        .panel {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(20px);
            border-radius: 20px;
            padding: 25px;
            box-shadow: 0 25px 50px rgba(0,0,0,0.15);
        }
        
        .panel-title {
            font-size: 1.5rem;
            font-weight: bold;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        
        .chart-container {
            position: relative;
            height: 400px;
            margin: 20px 0;
        }
        
        .chart {
            width: 100%;
            height: 100%;
            background: #f8f9fa;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }
        
        .chart svg {
            width: 100%;
            height: 100%;
        }
        
        .metrics-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 20px;
            margin-bottom: 30px;
        }
        
        .metric-card {
            background: white;
            border-radius: 12px;
            padding: 25px;
            text-align: center;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
            transition: transform 0.3s ease;
        }
        
        .metric-card:hover {
            transform: translateY(-5px);
        }
        
        .metric-number {
            font-size: 2.5rem;
            font-weight: bold;
            margin-bottom: 10px;
        }
        
        .metric-label {
            color: #666;
            font-size: 14px;
            margin-bottom: 10px;
        }
        
        .metric-change {
            font-size: 12px;
            padding: 4px 8px;
            border-radius: 12px;
            font-weight: 500;
        }
        
        .metric-change.positive {
            background: #d4edda;
            color: #155724;
        }
        
        .metric-change.negative {
            background: #f8d7da;
            color: #721c24;
        }
        
        .metric-change.neutral {
            background: #d1ecf1;
            color: #0c5460;
        }
        
        .algorithm-comparison {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
            gap: 20px;
            margin: 20px 0;
        }
        
        .algorithm-card {
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }
        
        .algorithm-name {
            font-weight: bold;
            margin-bottom: 10px;
            color: #333;
        }
        
        .algorithm-score {
            font-size: 2rem;
            font-weight: bold;
            color: #667eea;
            margin-bottom: 10px;
        }
        
        .algorithm-metrics {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
            font-size: 12px;
        }
        
        .algorithm-metric {
            display: flex;
            justify-content: space-between;
        }
        
        .progress-bar {
            width: 100%;
            height: 8px;
            background: #e9ecef;
            border-radius: 4px;
            overflow: hidden;
            margin: 10px 0;
        }
        
        .progress-fill {
            height: 100%;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            transition: width 0.3s ease;
        }
        
        .user-segments {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            gap: 15px;
            margin: 20px 0;
        }
        
        .segment-card {
            background: white;
            border-radius: 12px;
            padding: 20px;
            text-align: center;
            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        }
        
        .segment-icon {
            font-size: 2rem;
            margin-bottom: 10px;
        }
        
        .segment-name {
            font-weight: bold;
            margin-bottom: 5px;
        }
        
        .segment-count {
            color: #667eea;
            font-size: 1.5rem;
            font-weight: bold;
        }
        
        .real-time-feed {
            max-height: 400px;
            overflow-y: auto;
        }
        
        .feed-item {
            display: flex;
            align-items: center;
            padding: 12px;
            border-bottom: 1px solid #eee;
            transition: background 0.3s ease;
        }
        
        .feed-item:hover {
            background: #f8f9fa;
        }
        
        .feed-icon {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 15px;
            font-size: 1.2rem;
        }
        
        .feed-content {
            flex: 1;
        }
        
        .feed-title {
            font-weight: 500;
            margin-bottom: 5px;
        }
        
        .feed-description {
            color: #666;
            font-size: 14px;
        }
        
        .feed-time {
            color: #999;
            font-size: 12px;
        }
        
        .heatmap {
            display: grid;
            grid-template-columns: repeat(24, 1fr);
            gap: 2px;
            margin: 20px 0;
        }
        
        .heatmap-cell {
            aspect-ratio: 1;
            border-radius: 4px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 10px;
            color: white;
            font-weight: bold;
        }
        
        .heatmap-legend {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
            font-size: 12px;
            color: #666;
        }
        
        .btn {
            padding: 12px 24px;
            border: none;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 600;
            transition: all 0.3s ease;
            text-decoration: none;
            display: inline-block;
            margin: 5px;
        }
        
        .btn-primary {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
        }
        
        .btn-primary:hover {
            transform: translateY(-2px);
            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
        }
        
        .btn-secondary {
            background: #6c757d;
            color: white;
        }
        
        .btn-info {
            background: #17a2b8;
            color: white;
        }
        
        .loading {
            text-align: center;
            padding: 40px;
            color: #666;
        }
        
        .loading::after {
            content: '';
            display: inline-block;
            width: 30px;
            height: 30px;
            border: 4px solid #f3f3f3;
            border-top: 4px solid #667eea;
            border-radius: 50%;
            animation: spin 1s linear infinite;
            margin-left: 10px;
        }
        
        @keyframes spin {
            0% { transform: rotate(0deg); }
            100% { transform: rotate(360deg); }
        }
        
        .tabs {
            display: flex;
            margin-bottom: 20px;
            background: #f8f9fa;
            border-radius: 12px;
            padding: 4px;
        }
        
        .tab {
            flex: 1;
            padding: 12px;
            border: none;
            background: transparent;
            cursor: pointer;
            font-weight: 600;
            color: #666;
            border-radius: 8px;
            transition: all 0.3s ease;
        }
        
        .tab.active {
            background: white;
            color: #667eea;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
        }
        
        @media (max-width: 1200px) {
            .dashboard-grid {
                grid-template-columns: 1fr;
            }
        }
        
        @media (max-width: 768px) {
            .metrics-grid {
                grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
            }
            
            .algorithm-comparison {
                grid-template-columns: 1fr;
            }
        }
    </style>
</head>
<body>
    <div class="container">
        <!-- 头部 -->
        <div class="header">
            <h1>📊 AI推荐系统分析仪表板</h1>
            <p>深度分析推荐系统性能、用户行为和算法效果</p>
        </div>
        
        <!-- 主要指标 -->
        <div class="metrics-grid">
            <div class="metric-card">
                <div class="metric-number" style="color: #667eea;" id="totalUsers">12,456</div>
                <div class="metric-label">总用户数</div>
                <div class="metric-change positive">+12.5%</div>
            </div>
            
            <div class="metric-card">
                <div class="metric-number" style="color: #28a745;" id="totalRecommendations">89,234</div>
                <div class="metric-label">总推荐数</div>
                <div class="metric-change positive">+8.3%</div>
            </div>
            
            <div class="metric-card">
                <div class="metric-number" style="color: #ffc107;" id="clickRate">23.7%</div>
                <div class="metric-label">点击率</div>
                <div class="metric-change positive">+2.1%</div>
            </div>
            
            <div class="metric-card">
                <div class="metric-number" style="color: #17a2b8;" id="conversionRate">8.9%</div>
                <div class="metric-label">转化率</div>
                <div class="metric-change positive">+1.4%</div>
            </div>
            
            <div class="metric-card">
                <div class="metric-number" style="color: #dc3545;" id="avgResponseTime">45ms</div>
                <div class="metric-label">平均响应时间</div>
                <div class="metric-change negative">+5ms</div>
            </div>
            
            <div class="metric-card">
                <div class="metric-number" style="color: #6f42c1;" id="algorithmAccuracy">94.2%</div>
                <div class="metric-label">算法准确率</div>
                <div class="metric-change positive">+0.8%</div>
            </div>
        </div>
        
        <!-- 主仪表板 -->
        <div class="dashboard-grid">
            <div class="main-panel">
                <div class="panel-title">
                    <span>📈</span>
                    推荐效果分析
                </div>
                
                <div class="tabs">
                    <button class="tab active" onclick="showTab('performance')">性能分析</button>
                    <button class="tab" onclick="showTab('algorithms')">算法对比</button>
                    <button class="tab" onclick="showTab('users')">用户分析</button>
                </div>
                
                <div id="performanceTab" class="tab-content">
                    <div class="chart-container">
                        <div class="chart" id="performanceChart">
                            <div style="text-align: center; color: #666;">
                                <div style="font-size: 24px; margin-bottom: 10px;">📊</div>
                                <p>推荐效果趋势图</p>
                                <div style="margin-top: 20px;">
                                    <div style="display: flex; justify-content: space-around; margin: 20px 0;">
                                        <div style="text-align: center;">
                                            <div style="font-size: 2rem; color: #28a745;">23.7%</div>
                                            <div style="font-size: 12px; color: #666;">点击率</div>
                                        </div>
                                        <div style="text-align: center;">
                                            <div style="font-size: 2rem; color: #ffc107;">8.9%</div>
                                            <div style="font-size: 12px; color: #666;">转化率</div>
                                        </div>
                                        <div style="text-align: center;">
                                            <div style="font-size: 2rem; color: #17a2b8;">4.6</div>
                                            <div style="font-size: 12px; color: #666;">用户满意度</div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div id="algorithmsTab" class="tab-content" style="display: none;">
                    <div class="algorithm-comparison">
                        <div class="algorithm-card">
                            <div class="algorithm-name">深度学习</div>
                            <div class="algorithm-score">94.2%</div>
                            <div class="algorithm-metrics">
                                <div class="algorithm-metric">
                                    <span>准确率</span>
                                    <span>94.2%</span>
                                </div>
                                <div class="algorithm-metric">
                                    <span>响应时间</span>
                                    <span>45ms</span>
                                </div>
                                <div class="algorithm-metric">
                                    <span>用户满意度</span>
                                    <span>4.6/5</span>
                                </div>
                                <div class="algorithm-metric">
                                    <span>覆盖率</span>
                                    <span>87.3%</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="algorithm-card">
                            <div class="algorithm-name">协同过滤</div>
                            <div class="algorithm-score">89.7%</div>
                            <div class="algorithm-metrics">
                                <div class="algorithm-metric">
                                    <span>准确率</span>
                                    <span>89.7%</span>
                                </div>
                                <div class="algorithm-metric">
                                    <span>响应时间</span>
                                    <span>32ms</span>
                                </div>
                                <div class="algorithm-metric">
                                    <span>用户满意度</span>
                                    <span>4.3/5</span>
                                </div>
                                <div class="algorithm-metric">
                                    <span>覆盖率</span>
                                    <span>92.1%</span>
                                </div>
                            </div>
                        </div>
                        
                        <div class="algorithm-card">
                            <div class="algorithm-name">内容过滤</div>
                            <div class="algorithm-score">86.4%</div>
                            <div class="algorithm-metrics">
                                <div class="algorithm-metric">
                                    <span>准确率</span>
                                    <span>86.4%</span>
                                </div>
                                <div class="algorithm-metric">
                                    <span>响应时间</span>
                                    <span>28ms</span>
                                </div>
                                <div class="algorithm-metric">
                                    <span>用户满意度</span>
                                    <span>4.1/5</span>
                                </div>
                                <div class="algorithm-metric">
                                    <span>覆盖率</span>
                                    <span>95.6%</span>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div id="usersTab" class="tab-content" style="display: none;">
                    <div class="user-segments">
                        <div class="segment-card">
                            <div class="segment-icon">👥</div>
                            <div class="segment-name">新用户</div>
                            <div class="segment-count">3,245</div>
                        </div>
                        
                        <div class="segment-card">
                            <div class="segment-icon">⭐</div>
                            <div class="segment-name">活跃用户</div>
                            <div class="segment-count">5,678</div>
                        </div>
                        
                        <div class="segment-card">
                            <div class="segment-icon">💎</div>
                            <div class="segment-name">VIP用户</div>
                            <div class="segment-count">1,234</div>
                        </div>
                        
                        <div class="segment-card">
                            <div class="segment-icon">😴</div>
                            <div class="segment-name">流失用户</div>
                            <div class="segment-count">2,299</div>
                        </div>
                    </div>
                    
                    <div style="margin-top: 20px;">
                        <h4 style="margin-bottom: 15px;">用户活跃度热力图</h4>
                        <div class="heatmap" id="userHeatmap">
                            <!-- 热力图将通过JavaScript生成 -->
                        </div>
                        <div class="heatmap-legend">
                            <span>低活跃度</span>
                            <span>高活跃度</span>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="side-panel">
                <div class="panel">
                    <div class="panel-title">
                        <span>🔄</span>
                        实时动态
                    </div>
                    <div class="real-time-feed" id="realTimeFeed">
                        <!-- 实时动态将通过JavaScript生成 -->
                    </div>
                </div>
                
                <div class="panel">
                    <div class="panel-title">
                        <span>🎯</span>
                        A/B测试结果
                    </div>
                    <div id="abTestResults">
                        <div style="margin-bottom: 15px;">
                            <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
                                <span>算法A (深度学习)</span>
                                <span>94.2%</span>
                            </div>
                            <div class="progress-bar">
                                <div class="progress-fill" style="width: 94.2%;"></div>
                            </div>
                        </div>
                        
                        <div style="margin-bottom: 15px;">
                            <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
                                <span>算法B (协同过滤)</span>
                                <span>89.7%</span>
                            </div>
                            <div class="progress-bar">
                                <div class="progress-fill" style="width: 89.7%;"></div>
                            </div>
                        </div>
                        
                        <div style="margin-bottom: 15px;">
                            <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
                                <span>算法C (内容过滤)</span>
                                <span>86.4%</span>
                            </div>
                            <div class="progress-bar">
                                <div class="progress-fill" style="width: 86.4%;"></div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="panel">
                    <div class="panel-title">
                        <span>⚡</span>
                        系统状态
                    </div>
                    <div id="systemStatus">
                        <div style="margin-bottom: 15px;">
                            <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
                                <span>CPU使用率</span>
                                <span>65%</span>
                            </div>
                            <div class="progress-bar">
                                <div class="progress-fill" style="width: 65%;"></div>
                            </div>
                        </div>
                        
                        <div style="margin-bottom: 15px;">
                            <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
                                <span>内存使用率</span>
                                <span>78%</span>
                            </div>
                            <div class="progress-bar">
                                <div class="progress-fill" style="width: 78%;"></div>
                            </div>
                        </div>
                        
                        <div style="margin-bottom: 15px;">
                            <div style="display: flex; justify-content: space-between; margin-bottom: 5px;">
                                <span>推荐准确率</span>
                                <span>94.2%</span>
                            </div>
                            <div class="progress-bar">
                                <div class="progress-fill" style="width: 94.2%;"></div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 操作按钮 -->
        <div style="text-align: center; margin-top: 30px;">
            <button class="btn btn-primary" onclick="refreshAnalytics()">🔄 刷新数据</button>
            <button class="btn btn-secondary" onclick="exportData()">📊 导出报告</button>
            <button class="btn btn-info" onclick="goToAdvancedAI()">🧠 高级AI界面</button>
        </div>
    </div>

    <script>
        // 页面初始化
        window.onload = function() {
            initializeAnalytics();
            generateUserHeatmap();
            startRealTimeFeed();
            updateSystemStatus();
        };
        
        // 初始化分析
        function initializeAnalytics() {
            console.log('📊 分析仪表板初始化中...');
            updateMetrics();
        }
        
        // 更新指标
        function updateMetrics() {
            // 模拟数据更新
            const metrics = {
                totalUsers: Math.floor(Math.random() * 5000) + 10000,
                totalRecommendations: Math.floor(Math.random() * 20000) + 80000,
                clickRate: (Math.random() * 5 + 20).toFixed(1),
                conversionRate: (Math.random() * 3 + 7).toFixed(1),
                avgResponseTime: Math.floor(Math.random() * 20) + 30,
                algorithmAccuracy: (Math.random() * 5 + 90).toFixed(1)
            };
            
            document.getElementById('totalUsers').textContent = metrics.totalUsers.toLocaleString();
            document.getElementById('totalRecommendations').textContent = metrics.totalRecommendations.toLocaleString();
            document.getElementById('clickRate').textContent = metrics.clickRate + '%';
            document.getElementById('conversionRate').textContent = metrics.conversionRate + '%';
            document.getElementById('avgResponseTime').textContent = metrics.avgResponseTime + 'ms';
            document.getElementById('algorithmAccuracy').textContent = metrics.algorithmAccuracy + '%';
        }
        
        // 显示标签页
        function showTab(tabName) {
            // 隐藏所有标签页
            document.querySelectorAll('.tab-content').forEach(tab => {
                tab.style.display = 'none';
            });
            
            // 移除所有标签的激活状态
            document.querySelectorAll('.tab').forEach(tab => {
                tab.classList.remove('active');
            });
            
            // 显示选中的标签页
            document.getElementById(tabName + 'Tab').style.display = 'block';
            
            // 激活对应的标签
            event.target.classList.add('active');
        }
        
        // 生成用户热力图
        function generateUserHeatmap() {
            const heatmap = document.getElementById('userHeatmap');
            const hours = ['00', '01', '02', '03', '04', '05', '06', '07', '08', '09', '10', '11', 
                          '12', '13', '14', '15', '16', '17', '18', '19', '20', '21', '22', '23'];
            
            heatmap.innerHTML = hours.map(hour => {
                const intensity = Math.random();
                const color = getHeatmapColor(intensity);
                
                return `<div class="heatmap-cell" style="background-color: ${color};" title="${hour}:00 - 活跃度: ${(intensity * 100).toFixed(1)}%">${hour}</div>`;
            }).join('');
        }
        
        // 获取热力图颜色
        function getHeatmapColor(intensity) {
            const colors = [
                '#ebedf0', '#c6e48b', '#7bc96f', '#239a3b', '#196127'
            ];
            const index = Math.floor(intensity * (colors.length - 1));
            return colors[index];
        }
        
        // 开始实时动态
        function startRealTimeFeed() {
            const feed = document.getElementById('realTimeFeed');
            const events = [
                { icon: '🎯', title: '推荐算法更新', description: '深度学习模型已优化', time: '2分钟前' },
                { icon: '👥', title: '新用户注册', description: '新增 23 名用户', time: '5分钟前' },
                { icon: '📊', title: 'A/B测试完成', description: '算法A表现最佳', time: '8分钟前' },
                { icon: '⚡', title: '系统性能优化', description: '响应时间减少 15%', time: '12分钟前' },
                { icon: '🎉', title: '转化率提升', description: '今日转化率 +2.3%', time: '15分钟前' }
            ];
            
            feed.innerHTML = events.map(event => `
                <div class="feed-item">
                    <div class="feed-icon" style="background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white;">
                        ${event.icon}
                    </div>
                    <div class="feed-content">
                        <div class="feed-title">${event.title}</div>
                        <div class="feed-description">${event.description}</div>
                    </div>
                    <div class="feed-time">${event.time}</div>
                </div>
            `).join('');
        }
        
        // 更新系统状态
        function updateSystemStatus() {
            setInterval(() => {
                const cpuUsage = Math.floor(Math.random() * 20) + 60;
                const memoryUsage = Math.floor(Math.random() * 15) + 70;
                const accuracy = (Math.random() * 3 + 92).toFixed(1);
                
                // 更新进度条
                const cpuBar = document.querySelector('#systemStatus .progress-bar:nth-child(2) .progress-fill');
                const memoryBar = document.querySelector('#systemStatus .progress-bar:nth-child(5) .progress-fill');
                const accuracyBar = document.querySelector('#systemStatus .progress-bar:nth-child(8) .progress-fill');
                
                if (cpuBar) cpuBar.style.width = cpuUsage + '%';
                if (memoryBar) memoryBar.style.width = memoryUsage + '%';
                if (accuracyBar) accuracyBar.style.width = accuracy + '%';
                
                // 更新数值
                const statusElements = document.querySelectorAll('#systemStatus span');
                if (statusElements[1]) statusElements[1].textContent = cpuUsage + '%';
                if (statusElements[4]) statusElements[4].textContent = memoryUsage + '%';
                if (statusElements[7]) statusElements[7].textContent = accuracy + '%';
            }, 5000);
        }
        
        // 刷新分析数据
        function refreshAnalytics() {
            console.log('🔄 刷新分析数据...');
            updateMetrics();
            generateUserHeatmap();
            startRealTimeFeed();
            showMessage('✅ 数据已刷新', 'success');
        }
        
        // 导出数据
        function exportData() {
            showMessage('📊 正在生成分析报告...', 'info');
            
            // 模拟导出过程
            setTimeout(() => {
                showMessage('✅ 分析报告已导出', 'success');
            }, 2000);
        }
        
        // 跳转到高级AI界面
        function goToAdvancedAI() {
            window.location.href = 'advanced-ai-interface.html';
        }
        
        // 显示消息
        function showMessage(text, type) {
            const messageDiv = document.createElement('div');
            messageDiv.style.cssText = `
                position: fixed;
                top: 20px;
                right: 20px;
                padding: 15px 20px;
                border-radius: 8px;
                color: white;
                font-weight: 500;
                z-index: 1000;
                animation: slideIn 0.3s ease;
            `;
            
            const colors = {
                success: '#28a745',
                error: '#dc3545',
                info: '#17a2b8',
                warning: '#ffc107'
            };
            
            messageDiv.style.background = colors[type] || colors.info;
            messageDiv.textContent = text;
            
            document.body.appendChild(messageDiv);
            
            setTimeout(() => {
                messageDiv.remove();
            }, 3000);
        }
        
        // 添加CSS动画
        const style = document.createElement('style');
        style.textContent = `
            @keyframes slideIn {
                from { transform: translateX(100%); opacity: 0; }
                to { transform: translateX(0); opacity: 1; }
            }
        `;
        document.head.appendChild(style);
    </script>
</body>
</html>
